<template>

    <el-row style="  display: flex;align-items: center;">
        <el-col :span="4">
            <el-button type="primary" @click="playAudio">播放</el-button>

        </el-col>
        <el-col :span="20">
            <el-slider v-model="nowDuration" :min="0" :max="duration" @input="slideInput($event)"
                @change="sliderChange($event)"></el-slider>
        </el-col>
        <!-- <el-icon size="30" ><VideoPlay  /></el-icon> -->
        <!-- <span>播放总时长{{ duration }}</span>
        <span>当前播放市场{{ nowDuration }}</span> -->

    </el-row>

</template>
<script setup>
//'http://49.234.50.111/files/music/1.mp3'
import { ref,defineProps,toRef  } from 'vue';

const props = defineProps({
    src: String
    
   //音频文件的URL
});
console.log(props.src);
const audioUrl = toRef(props, 'src'); // 音频文件的URL
 
  const audioPlayer = ref(new Audio(audioUrl.value));
//音频时间总长度（秒）
const duration = ref(null);
//音频当前长度（秒）
const nowDuration = ref(null);



//监听播放器是否创建成功
audioPlayer.value.addEventListener('loadedmetadata', () => {
    duration.value = audioPlayer.value.duration;
});


// 监听音频的播放位置更新事件
audioPlayer.value.addEventListener('timeupdate', () => {
    nowDuration.value = audioPlayer.value.currentTime;
});
//监听松开滑动器事件
function sliderChange(num) {
    audioPlayer.value.currentTime = num;

}
//监听是否在用滑动器
function slideInput() {
    if (!audioPlayer.value.paused) {
        audioPlayer.value.pause();

    }
}

const playAudio = () => {
    if (audioPlayer.value.paused) {
        audioPlayer.value.play();

    } else {
        audioPlayer.value.pause();

    }
};

</script>
<style scoped></style>